<template>
  <div class="bookItem book" >
    <div class="db-card" v-for="value,i in bookItems" :id="value.id" :key="i" >
      <div class="db-card-img" :id="value.id" @click.stop="toPubDet($event)">
        <img src="../../../public/img/34157247.jpg" alt="封面" />
      </div>
      <div class="db-card-text">
        <h4 @click.stop="toPubDet($event)" :id="value.id">
          <a
            href="javascript:;"
          >
            <span class="title"> {{value.book_name}} </span>
          </a>
        </h4>
        <div class="author">
          <span id="country">[{{value.wCountry}}]</span>&ThinSpace;
          <span id="writer">{{value.writer}}</span>
          <span id="transer">{{value.transer}}</span>
        </div>
        <div class="detile">
          {{value.info}}
        </div>
        <div class="ext-detile">
          <span class="style"> <a href="#">{{value.style}}</a></span>
          <span class="spera"></span>
        </div>
        <div class="card-bottom">
          <div class="price">
            <span class="rmb-tag">￥</span>
            <span class="old-price">100</span>
            <span class="now-price">200</span>
          </div>
          <div class="buttons">
            <span class="shopping">
              <a href="#">
                <!-- <img
                  src="http://localhost:8080/img/shopcard.png"
                  alt="购物车"
                /> -->
              </a>
            </span>
            <button @click="into_list">加入书单</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
    data(){
        return{
            time:this.book,

        }
    },
    props:["Bookes"],
    methods:{
    
    },
    mounted(){

    },
    methods:{
      into_list(){
       console.log('!!!!');
      },
      toPubDet(e){
        let id = e.target.parentElement.parentElement.id;
        this.$router.push(`/detail_publishs?bookId=${id}`);
      }
    },
    computed:{
      bookItems(){
       
          return this.Bookes;
       
      }
    },
    beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    
    },
}
</script>
<style>
 .bookItem{
     margin: 0 auto;
 }
</style>